<template>
    <div class=" population-page population-page u-f">
      <div class="flex-1 p-15">
        <p style="font-family: KaiTi,serif;font-size: 16px;">
            <span style="font-size: 30px; color: black;font-weight: bold;">唐朝著名诗人关系网：</span><br><br>
            <span style="color: #007175; font-weight: bold; font-size: 20px;">绿色连接线</span>表示<span style="color: #007175; font-weight: bold; font-size: 20px;">“好友”</span>关系。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">初唐</span>诗人里，杨炯、宋之问、杜审言都是好朋友。杨炯看不上王勃，但对卢照邻还算是服气。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">盛唐</span>时期，“李杜”算是社交中心，杜甫更是崇拜李白，虽然有些“单相思”。值得关注的是，李白和王维其实是同岁的。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">中唐</span>，韩愈柳宗元相爱相杀，白居易元稹关系甚好，而他们都和刘禹锡是好朋友。元稹和韩愈都很是崇拜老大哥杜甫，白居易则很崇拜小后辈李商隐。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">鼠标悬浮</span>至对应头像，可以<span style="color: #95302e; font-weight: bold; font-size: 20px;">查看详情信息</span>。<span style="color: #95302e; font-weight: bold; font-size: 20px;">双击</span>对应头像，相关关系网络就会<span style="color: #95302e; font-weight: bold; font-size: 20px;">高亮</span>。<span style="color: #95302e; font-weight: bold; font-size: 20px;">双击空白区域</span><span style="color: #95302e; font-weight: bold; font-size: 20px;">复原</span>。<br><br>
        </p>
      </div>
      <!-- <div class="network chat">
        <div class="search-box">
          <input 
            type="text" 
            id="searchBox" 
            class="search-txt" 
            placeholder="name?" 
            v-model="searchName"
            @input="handleSearch"
          />
          <a class="search-btn">
            <i class="fa fa-search" aria-hidden="true"></i>
          </a>
        </div> -->
        <!-- <div class="button">
          <img id="editBtn" @click="refreshNetwork">
        </div> -->
        <div class="flex-3 h100 chart p-5">
            <div ref="networkContainer" class="network-container h100"></div>
        </div>
    </div>
  </template>
  
  <script>
  import * as d3 from 'd3';
  import { relationListPoet } from '@/api/relation-api'
  import { poetList } from '@/api/poet-api'

  export default {
    name: 'NetworkGraph',
    data() {
      return {
        searchName: '',
        groupExplorer: null,
        container:'',
        defaultConfig: {
          data: {
            "nodes": [
            {
                "name": "元稹",
                "zihao": "字微之，别字威明",
                "dynasty": "中唐",
                "age": "52岁（779年~831年）",
                "epithet": "与白居易并称“元白”",
                "deeds": "提倡“新乐府”，倡导“古文运动”",
                "famous": "《乐府古题序》、《莺莺传》",
                "image": "元稹.png",
                "link": "https://so.gushiwen.cn/authorv_201a0677dee4.aspx"
            },
            {
                "name": "刘禹锡",
                "zihao": "字梦得",
                "dynasty": "中唐、晚唐",
                "age": "70岁（772年~842年）",
                "epithet": "“诗豪”",
                "deeds": "王叔文派政治革新活动的中心人物，参与永贞革新",
                "famous": "《酬乐天扬州初逢席上见赠》、《汉寿城春望》",
                "image": "刘禹锡.png",
                "link": "https://so.gushiwen.cn/authorv_e3c4e8cf2646.aspx"
            },
            {
                "name": "卢照邻",
                "zihao": "字升之，自号幽忧子",
                "dynasty": "初唐",
                "age": "54岁（约635年~689年）",
                "epithet": "“初唐四杰”之一",
                "deeds": "与王勃、杨炯、骆宾王以文词齐名，世称“王杨卢骆”",
                "famous": "《长安古意》、《幽忧子集》",
                "image": "卢照邻.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%8D%A2%E7%85%A7%E9%82%BB&valuej=%E5%8D%A2"
            },
            {
                "name": "孟浩然",
                "zihao": "字浩然，号孟山人",
                "dynasty": "初唐、盛唐",
                "age": "51岁（689年~740年）",
                "epithet": "与王维并称为“王孟”",
                "deeds": "唐代著名的山水田园派诗人",
                "famous": "《过故人庄》、《春晓》",
                "image": "孟浩然.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%AD%9F%E6%B5%A9%E7%84%B6&valuej=%E5%AD%9F"
            },
            {
                "name": "孟郊",
                "zihao": "字东野",
                "dynasty": "盛唐、中唐",
                "age": "63岁（751年~814年）",
                "epithet": "“诗囚”，与贾岛齐名，人称“郊寒岛瘦”",
                "deeds": "遭际不遇，官职卑微，一生穷困，一生苦吟",
                "famous": "《游子吟》、《送卢郎中汀》",
                "image": "孟郊.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%AD%9F%E9%83%8A&valuej=%E5%AD%9F"
            },
            {
                "name": "宋之问",
                "zihao": "字延清，名少连",
                "dynasty": "初唐",
                "age": "56岁（约656年~712年）",
                "epithet": "与沈佺期并称“沈宋”",
                "deeds": "与司马承祯、卢藏用、陈子昂、王适、毕构、李白、孟浩然、王维、贺知章称为仙宗十友",
                "famous": "《冬霄引·赠司马承桢》、《明河篇》",
                "image": "宋之问.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%AE%8B%E4%B9%8B%E9%97%AE&valuej=%E5%AE%8B"
            },
            {
                "name": "岑参",
                "zihao": "字微之，别字威明",
                "dynasty": "盛唐、中唐",
                "age": "51岁（约718年~769年）",
                "epithet": "与高适并称“高岑”",
                "deeds": "唐代著名边塞诗人",
                "famous": "《白雪歌送武判官归京》、《寄左省杜拾遗》",
                "image": "岑参.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%B2%91%E5%8F%82&valuej=%E5%B2%91"
            },
            {
                "name": "张九龄",
                "zihao": "字子寿，一名博物",
                "dynasty": "初唐、盛唐",
                "age": "62岁（678年~740年）",
                "epithet": "“岭南第一人”",
                "deeds": "为“开元之治”作出了积极贡献；对扫除唐初所沿习的六朝绮靡诗风，贡献尤大。誉为“岭南第一人”",
                "famous": "《望月怀远》、《西江夜行》",
                "image": "张九龄.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%BC%A0%E4%B9%9D%E9%BE%84&valuej=%E5%BC%A0"
            },
            {
                "name": "张说",
                "zihao": "字道济，一字说之",
                "dynasty": "初唐、盛唐",
                "age": "63岁（667年~730年）",
                "epithet": "“燕许大手笔”",
                "deeds": "与苏颋（封许国公）齐名，俱有文名，掌朝廷制诰著作",
                "famous": "《五君咏》、《送梁六自洞庭山作》",
                "image": "张说.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E5%8D%A2%E7%85%A7%E9%82%BB&valuej=%E5%8D%A2"
            },
            {
                "name": "李商隐",
                "zihao": "字义山，号玉溪（谿）生、樊南生",
                "dynasty": "中唐、晚唐",
                "age": "45岁（约813年~858年）",
                "epithet": "和杜牧合称“小李杜”，与温庭筠合称为“温李”",
                "deeds": "晚唐著名诗人，爱情诗和无题诗写得缠绵悱恻，优美动人，广为传诵",
                "famous": "《无题·相见时难别亦难》、《锦瑟》",
                "image": "李商隐.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%8E%E5%95%86%E9%9A%90&valuej=%E6%9D%8E"
            },
            {
                "name": "李白",
                "zihao": "字太白，号青莲居士，又号“谪仙人”",
                "dynasty": "中唐、晚唐",
                "age": "61岁（701年~762年）",
                "epithet": "“诗仙”",
                "deeds": "唐代伟大的浪漫主义诗人，与杜甫并称为“李杜”",
                "famous": "《望庐山瀑布》、《行路难》、《蜀道难》、《将进酒》",
                "image": "李白.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%8E%E7%99%BD&valuej=%E6%9D%8E"
            },
            {
                "name": "李贺",
                "zihao": "字升之，自号幽忧子",
                "dynasty": "中唐",
                "age": "27岁（约790年~817年）",
                "epithet": "“诗鬼”",
                "deeds": "“长吉体”诗歌的开创者，与李白、李商隐称为唐代三李",
                "famous": "《李凭箜篌引》、《雁门太守行》",
                "image": "李贺.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%8E%E8%B4%BA&valuej=%E6%9D%8E"
            },
            {
                "name": "杜审言",
                "zihao": "字必简",
                "dynasty": "初唐",
                "age": "63岁（约645年~708年）",
                "epithet": "“文章四友”之一",
                "deeds": "唐代“近体诗”的奠基人之一",
                "famous": "《和晋陵陆丞早春游望》、《春日京中有怀》",
                "image": "杜审言.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%9C%E5%AE%A1%E8%A8%80&valuej=%E6%9D%9C"
            },
            {
                "name": "杜牧",
                "zihao": "字牧之，号樊川居士",
                "dynasty": "中唐、晚唐",
                "age": "49岁（约803年~852年）",
                "epithet": "世称“杜樊川”",
                "deeds": "与李商隐并称“小李杜”",
                "famous": "《清明》、《阿房宫赋》",
                "image": "杜牧.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%9C%E7%89%A7&valuej=%E6%9D%9C"
            },
            {
                "name": "杜甫",
                "zihao": "字子美，自号少陵野老，世称“杜工部”、“杜少陵”等",
                "dynasty": "盛唐、中唐",
                "age": "58岁（712年~770年）",
                "epithet": "“诗圣”，其诗被称为“诗史”",
                "deeds": "唐代伟大的现实主义诗人，与李白合称“李杜”",
                "famous": "《春望》、《登高》、《茅屋为秋风所破歌》、《春夜喜雨》",
                "image": "杜甫.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%9C%E7%94%AB&valuej=%E6%9D%9C"
            },
            {
                "name": "杨炯",
                "zihao": "字令明，世称“杨盈川”",
                "dynasty": "初唐",
                "age": "42岁（650年~692年）",
                "epithet": "“初唐四杰”之一",
                "deeds": "与王勃、卢照邻、骆宾王以文词齐名，世称“王杨卢骆”",
                "famous": "《从军行》、《战城南》",
                "image": "杨炯.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9D%A8%E7%82%AF&valuej=%E6%9D%A8"
            },
            {
                "name": "柳宗元",
                "zihao": "字子厚，人称柳河东，又称柳柳州",
                "dynasty": "中唐",
                "age": "46岁（773年~819年）",
                "epithet": "与刘禹锡并称“刘柳”，与韩愈并称为“韩柳”，与王维、孟浩然、韦应物并称“王孟韦柳",
                "deeds": "唐宋八大家之一，杰出诗人、哲学家、儒学家乃至成就卓著的政治家",
                "famous": "《小石潭记》、《江雪》",
                "image": "柳宗元.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%9F%B3%E5%AE%97%E5%85%83&valuej=%E6%9F%B3"
            },
            {
                "name": "沈佺期",
                "zihao": "字云卿",
                "dynasty": "初唐、盛唐",
                "age": "54岁（约656年-715年）",
                "epithet": "与宋之问齐名，称“ 沈宋 ”",
                "deeds": "近体诗格律谨严精密，史论以为是律诗体制定型的代表诗人",
                "famous": "《独不见》、《夜宿七盘岭》",
                "image": "沈佺期.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E6%B2%88%E4%BD%BA%E6%9C%9F&valuej=%E6%B2%88"
            },
            {
                "name": "王之涣",
                "zihao": "字季凌",
                "dynasty": "初唐、盛唐",
                "age": "54岁（688年－742年）",
                "epithet": "无",
                "deeds": "与高适、王昌龄等相唱和，以善于描写边塞风光著称",
                "famous": "《登鹳雀楼》、《凉州词》",
                "image": "王之涣.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%8E%8B%E4%B9%8B%E6%B6%A3&valuej=%E7%8E%8B"
            },
            {
                "name": "王勃",
                "zihao": "字子安",
                "dynasty": "初唐",
                "age": "27岁（约649年~676年）",
                "epithet": "“初唐四杰”之首",
                "deeds": "诗歌体裁上擅长五律和五绝，主要文学成就是骈文，为一时至最",
                "famous": "《送杜少府之任蜀州》、《滕王阁序》",
                "image": "王勃.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%8E%8B%E5%8B%83&valuej=%E7%8E%8B"
            },
            {
                "name": "王昌龄",
                "zihao": "字少伯",
                "dynasty": "初唐、盛唐",
                "age": "58岁（698年~756年）",
                "epithet": "“七绝圣手”",
                "deeds": "诗以七绝见长，尤以登第之前赴西北边塞所作边塞诗最著，有“诗家夫子王江宁”之誉",
                "famous": "《芙蓉楼送辛渐》、《出塞》",
                "image": "王昌龄.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%8E%8B%E6%98%8C%E9%BE%84&valuej=%E7%8E%8B"
            },
            {
                "name": "王绩",
                "zihao": "字无功，号东皋子",
                "dynasty": "初唐",
                "age": "54岁（约590年~644年）",
                "epithet": "无",
                "deeds": "律体滥觞于六朝，而成型于隋唐之际，其实为先声",
                "famous": "《野望》、《在京思故园见乡人问》",
                "image": "王绩.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%8E%8B%E7%BB%A9&valuej=%E7%8E%8B"
            },
            {
                "name": "王维",
                "zihao": "字梦得",
                "dynasty": "初唐、盛唐",
                "age": "60岁（701年~761年）",
                "epithet": "“诗佛”，世称“王右丞”，与孟浩然合称“王孟”",
                "deeds": "苏轼评价其：“味摩诘之诗，诗中有画；观摩诘之画，画中有诗。",
                "famous": "《相思》、《山居秋暝》",
                "image": "王维.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%8E%8B%E7%BB%B4&valuej=%E7%8E%8B"
            },
            {
                "name": "白居易",
                "zihao": "字乐天，号香山居士，又号醉吟先生",
                "dynasty": "中唐、、晚唐",
                "age": "74岁（772年~846年）",
                "epithet": "“诗魔”，“诗王”，与元稹并称“元白”，与刘禹锡并称“刘白”",
                "deeds": "唐代伟大的现实主义诗人，唐代三大诗人之一，倡导新乐府运动",
                "famous": "《长恨歌》、《琵琶行》",
                "image": "白居易.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E7%99%BD%E5%B1%85%E6%98%93&valuej=%E7%99%BD"
            },
            {
                "name": "贺知章",
                "zihao": "字季真，号四明狂客",
                "dynasty": "初唐、盛唐",
                "age": "85岁（659年~744年）",
                "epithet": "无",
                "deeds": "诗文以绝句见长，除祭神乐章、应制诗外，其写景、抒怀之作风格独特，清新潇洒",
                "famous": "《咏柳》、《回乡偶书》",
                "image": "贺知章.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E8%B4%BA%E7%9F%A5%E7%AB%A0&valuej=%E8%B4%BA"
            },
            {
                "name": "贾岛",
                "zihao": "字浪（阆）仙，自号“碣石山人”",
                "dynasty": "中唐、晚唐",
                "age": "64岁（779年~843年）",
                "epithet": "无",
                "deeds": "无",
                "famous": "《寻隐者不遇》、《题李凝幽居》",
                "image": "贾岛.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E8%B4%BE%E5%B2%9B&valuej=%E8%B4%BE"
            },
            {
                "name": "陈子昂",
                "zihao": "字伯玉",
                "dynasty": "初唐",
                "age": "41岁（661年~702年）",
                "epithet": "世称陈拾遗",
                "deeds": "与司马承祯、卢藏用、宋之问、王适、毕构、李白、孟浩然、王维、贺知章称为仙宗十友",
                "famous": "《登幽州台歌》、《送魏大从军》",
                "image": "陈子昂.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E9%99%88%E5%AD%90%E6%98%82&valuej=%E9%99%88"
            },
            {
                "name": "韩愈",
                "zihao": "字退之",
                "dynasty": "中唐",
                "age": "56岁（768年~824年）",
                "epithet": "世称“韩昌黎”、“昌黎先生”，谥号为“文”，故称“韩文公”。与柳宗元并称“韩柳”，与柳宗元、欧阳修和苏轼并称“千古文章四大家”",
                "deeds": "唐代古文运动的倡导者，名列“唐宋八大家”之首，有“文章巨公”和“百代文宗”之名。倡导“文道合一”、“气盛言宜”、“务去陈言”、“文从字顺”等写作理论，对后人具有指导意义",
                "famous": "《乐府古题序》、《莺莺传》",
                "image": "韩愈.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E9%9F%A9%E6%84%88&valuej=%E9%9F%A9"
            },
            {
                "name": "骆宾王",
                "zihao": "字观光",
                "dynasty": "初唐",
                "age": "68岁（619年~687年）",
                "epithet": "“初唐四杰”之一，与富嘉谟并称“富骆”",
                "deeds": "无",
                "famous": "《咏鹅》、《在狱咏蝉》",
                "image": "骆宾王.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E9%AA%86%E5%AE%BE%E7%8E%8B&valuej=%E9%AA%86"
            },
            {
                "name": "高适",
                "zihao": "字达夫，一字仲武",
                "dynasty": "初唐、盛唐",
                "age": "61岁（704年~765年）",
                "epithet": "与岑参并称“高岑”，与岑参、王昌龄、王之涣合称“边塞四诗人”",
                "deeds": "唐代著名边塞诗人，其诗笔力雄健，气势奔放，洋溢着盛唐时期所特有的奋发进取、蓬勃向上的时代精神",
                "famous": "《别董大》、《燕歌行》",
                "image": "高适.png",
                "link": "https://so.gushiwen.cn/search.aspx?value=%E9%AB%98%E9%80%82&valuej=%E9%AB%98"
            }
            ],
            "links": [
            {
                "source": 14,
                "target": 27,
                "value": "崇拜"
            }, 
            {
                "source": 14,
                "target": 29,
                "value": "好友"
            },
            {
                "source": 29,
                "target": 14,
                "value": "好友"
            },
            {
                "source": 14,
                "target": 10,
                "value": "崇拜"
            },
            {
                "source": 14,
                "target": 22,
                "value": "好友"
            },
            {
                "source": 22,
                "target": 14,
                "value": "好友"
            },
            {
                "source": 14,
                "target": 6,
                "value": "好友"
            },
            {
                "source": 6,
                "target": 14,
                "value": "好友"
            },
            {
                "source": 22,
                "target": 6,
                "value": "好友"
            },
            {
                "source": 6,
                "target": 22,
                "value": "好友"
            },
            {
                "source": 12,
                "target": 14,
                "value": "爷爷"
            },
            {
                "source": 14,
                "target": 13,
                "value": "同宗"
            },
            {
                "source": 13,
                "target": 14,
                "value": "同宗"
            },
            {
                "source": 0,
                "target": 14,
                "value": "崇拜"
            },
            {
                "source": 0,
                "target": 23,
                "value": "好友"
            },
            {
                "source": 23,
                "target": 0,
                "value": "好友"
            },
            {
                "source": 0,
                "target": 16,
                "value": "好友"
            },
            {
                "source": 16,
                "target": 0,
                "value": "好友"
            },
            {
                "source": 0,
                "target": 1,
                "value": "好友"
            },
            {
                "source": 1,
                "target": 0,
                "value": "好友"
            },
            {
                "source": 23,
                "target": 1,
                "value": "好友"
            },
            {
                "source": 1,
                "target": 23,
                "value": "好友"
            },
            {
                "source": 1,
                "target": 16,
                "value": "好友"
            },
            {
                "source": 16,
                "target": 1,
                "value": "好友"
            },
            {
                "source": 23,
                "target": 9,
                "value": "崇拜"
            },
            {
                "source": 9,
                "target": 13,
                "value": "自荐"
            },
            {
                "source": 9,
                "target": 11,
                "value": "欣赏"
            },
            {
                "source": 27,
                "target": 1,
                "value": "好友"
            },
            {
                "source": 1,
                "target": 27,
                "value": "好友"
            },
            {
                "source": 27,
                "target": 16,
                "value": "好友"
            },
            {
                "source": 16,
                "target": 27,
                "value": "好友"
            },
            {
                "source": 27,
                "target": 14,
                "value": "崇拜"
            },
            {
                "source": 27,
                "target": 11,
                "value": "好友"
            },
            {
                "source": 11,
                "target": 27,
                "value": "好友"
            },
            {
                "source": 27,
                "target": 4,
                "value": "好友"
            },
            {
                "source": 4,
                "target": 27,
                "value": "好友"
            },
            {
                "source": 27,
                "target": 25,
                "value": "好友"
            },
            {
                "source": 25,
                "target": 27,
                "value": "好友"
            },
            {
                "source": 4,
                "target": 25,
                "value": "齐名"
            },
            {
                "source": 25,
                "target": 4,
                "value": "齐名"
            },
            {
                "source": 21,
                "target": 19,
                "value": "叔爷"
            },
            {
                "source": 15,
                "target": 19,
                "value": "不屑"
            },
            {
                "source": 15,
                "target": 2,
                "value": "服气"
            },
            {
                "source": 2,
                "target": 28,
                "value": "好友"
            },
            {
                "source": 28,
                "target": 2,
                "value": "好友"
            },
            {
                "source": 5,
                "target": 15,
                "value": "好友"
            },
            {
                "source": 15,
                "target": 5,
                "value": "好友"
            },
            {
                "source": 17,
                "target": 5,
                "value": "齐名"
            },
            {
                "source": 5,
                "target": 17,
                "value": "齐名"
            },
            {
                "source": 5,
                "target": 12,
                "value": "好友"
            },
            {
                "source": 12,
                "target": 5,
                "value": "好友"
            },
            {
                "source": 8,
                "target": 24,
                "value": "提拔"
            },
            {
                "source": 8,
                "target": 7,
                "value": "提拔"
            },
            {
                "source": 29,
                "target": 18,
                "value": "好友"
            },
            {
                "source": 18,
                "target": 29,
                "value": "好友"
            },
            {
                "source": 18,
                "target": 20,
                "value": "好友"
            },
            {
                "source": 20,
                "target": 18,
                "value": "好友"
            },
            {
                "source": 20,
                "target": 29,
                "value": "好友"
            },
            {
                "source": 29,
                "target": 20,
                "value": "好友"
            },
            {
                "source": 29,
                "target": 6,
                "value": "好友"
            },
            {
                "source": 6,
                "target": 29,
                "value": "好友"
            },
            {
                "source": 6,
                "target": 20,
                "value": "好友"
            },
            {
                "source": 20,
                "target": 6,
                "value": "好友"
            },
            {
                "source": 20,
                "target": 22,
                "value": "好友"
            },
            {
                "source": 22,
                "target": 20,
                "value": "好友"
            },
            {
                "source": 3,
                "target": 20,
                "value": "好友"
            },
            {
                "source": 20,
                "target": 3,
                "value": "好友"
            },
            {
                "source": 3,
                "target": 22,
                "value": "好友"
            },
            {
                "source": 22,
                "target": 3,
                "value": "好友"
            },
            {
                "source": 3,
                "target": 7,
                "value": "自荐"
            },
            {
                "source": 10,
                "target": 26,
                "value": "崇拜"
            },
            {
                "source": 10,
                "target": 24,
                "value": "好友"
            },
            {
                "source": 24,
                "target": 10,
                "value": "好友"
            },
            {
                "source": 10,
                "target": 8,
                "value": "自荐"
            },
            {
                "source": 10,
                "target": 3,
                "value": "崇拜"
            },
            {
                "source": 10,
                "target": 22,
                "value": "同岁"
            },
            {
                "source": 22,
                "target": 10,
                "value": "同岁"
            }
            ]
        },
          width: window.innerWidth * 0.7,
          height: window.innerHeight * 0.96,
          distance: 95
        }
      };
    },
    mounted() {
        this.getData()
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      if (this.groupExplorer) {
        window.removeEventListener('resize', this.handleResize);
        this.groupExplorer.destroy();
      }
    },
    methods: {
        getData(){
            const nodes = []
            const links = []
            Promise.all([poetList(), relationListPoet()]).then(res => {
                if (res[0].code === '200') {
                    res[0].data.forEach(e => {                        
                        nodes.push({
                            id: e.id,
                            name: e.name,
                            age: e.age,
                            image: e.img
                        })
                    })
                }
                if (res[1].code === '200') {
                    res[1].data.forEach(e => {
                        links.push({
                            source: e.poetId1 -1,
                            target: e.poetId2 -1,
                            value: e.relationType.name
                        })
                    })
                }
                console.log(nodes.length)
                this.defaultConfig.data = {
                    nodes: nodes,
                    links: links
                }
                this.initNetwork();
            })

        },

      initNetwork() {
        // 处理链接数据
        this.processLinkData();
        
        // 创建网络图实例
        this.groupExplorer = new GroupExplorer(
          this.$refs.networkContainer,
          this.defaultConfig
        );
      },
      
      processLinkData() {
        this.defaultConfig.data.links.forEach(link => {
          
          if (typeof link.source !== "number" && typeof link.target !== "number") {
            const sourceNode = this.defaultConfig.data.nodes.find(
              n => n.id === link.source
            );
            const targetNode = this.defaultConfig.data.nodes.find(
              n => n.id === link.target
            );
            link.source = sourceNode;
            link.target = targetNode;
          }
        });
      },
      
      handleResize() {
        if (this.groupExplorer) {
          this.groupExplorer.updateSize(
            /* window.innerWidth * 0.7,
            window.innerHeight * 0.96 */
            container.clientWidth,
            container.clientHeight
          );
        }
      },
      
      handleSearch() {
        if (this.groupExplorer) {
          this.groupExplorer.handleSearch(this.searchName.trim());
        }
      },
      
      refreshNetwork() {
        if (this.groupExplorer) {
          this.groupExplorer.destroy();
          this.initNetwork();
          this.searchName = '';
        }
      }
    }
  };
  
  class GroupExplorer {
    constructor(container, config) {
      this.container = container;
      this.config = Object.assign({
        data: { nodes: [], links: [] },
        /* width: window.innerWidth * 0.7,
        height: window.innerHeight * 0.96, */
        width: container.clientWidth,  // 使用容器实际宽度
        height: container.clientHeight, // 使用容器实际高度
        distance: 95
      }, config);
      
      this.highlighted = null;
      this.dependsNode = [];
      this.dependsLinkAndText = [];
      this.mouseoutTimeout = null;
      
      this.initSVG();
      this.initSimulation();
      this.initMarker();
      this.initLinks();
      this.initNodes();
      this.initLineTexts();
      this.initTooltip();
      this.initEvents();
    }
    
    initSVG() {
      // 创建SVG元素
      this.svg = d3.select(this.container)
        .append("svg")
        /* .attr("width", this.config.width)
        .attr("height", this.config.height); */
        .attr("width", "100%")
        .attr("height", "100%");
      
      // 添加缩放功能
      this.zoom = d3.zoom()
        .scaleExtent([0.2, 10])
        .on("zoom", (event) => {            
            this.vis.attr("transform", event.transform);
        });
      
      this.svg.call(this.zoom)
        .on("dblclick.zoom", null);
      
      // 创建分组用于放置所有元素
      this.vis = this.svg.append('g')
        .attr('class', 'all');
    }
    
    initSimulation() {
      this.force = d3.forceSimulation(this.config.data.nodes)
        .force("link", d3.forceLink(this.config.data.links).distance(this.config.distance))
        .force("linkForce", d3.forceLink().id(d => d.id).distance(50))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(this.config.width / 2, this.config.height / 2))
        .force("collide", d3.forceCollide(60).strength(0.2).iterations(5))
        .alphaTarget(1)
        .on("tick", () => this.tick());
    }
    
    initMarker() {
      // 创建箭头标记
      this.vis.append("defs").selectAll("marker")
        .data(["end"])
        .enter().append("marker")
        .attr("id", "arrow")
        .attr('class', 'arrow')
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 42)
        .attr("refY", 0)
        .attr("markerWidth", 7)
        .attr("markerHeight", 12)
        .attr("markerUnits", "userSpaceOnUse")
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr('fill', '#666');
    }
    
    initLinks() {
      // 创建连接线
      this.link = this.vis.selectAll("line.link")
        .data(this.config.data.links)
        .enter().append("line")
        .attr("class", "link")
        .attr('stroke-width', 1.8)
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y)
        .attr("stroke", d => {
          return d.value === "好友" ? "#007175" : "gray";
        })
        .attr("marker-end", "url(#arrow)");
    }
    
    initNodes() {
      // 创建节点组
      this.node = this.vis.selectAll("g.node")
        .data(this.config.data.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(this.getNodeDragBehavior())
        .on('mouseover', (event, d) => {
            this.force.stop(); // 停止模拟
            this.highlightToolTip(d, event)

            if (this.mouseoutTimeout) {
                clearTimeout(this.mouseoutTimeout);
                this.mouseoutTimeout = null;
            }
        })
        .on('mouseout', () => {
            this.force.alpha(0.3).restart();
            if (this.mouseoutTimeout) {
                clearTimeout(this.mouseoutTimeout);
                this.mouseoutTimeout = null;
            }
            this.mouseoutTimeout = setTimeout(() => {
                this.highlightToolTip(null);
            }, 300);
        })
        .on('dblclick', (event, d) => {
        this.highlightObject(d, event);
        event?.stopPropagation();
    });
      
      // 为节点添加图片
      this.node.append("image")
        .attr("class", "circle")
        .attr("xlink:href", d => `${d.image}`)
        .attr("x", "-25px")
        .attr("y", "-25px")
        .attr("width", "50px")
        .attr("height", "50px");
    }
    
    initLineTexts() {
      // 创建连线文本
      this.linetext = this.vis.selectAll('.linetext')
        .data(this.config.data.links)
        .enter()
        .append("text")
        .attr("class", "linetext")
        .attr("x", d => (d.source.x + d.target.x) / 2)
        .attr("y", d => (d.source.y + d.target.y) / 2)
        .text(d => d.value !== "好友" ? d.value : "")
        .call(d3.drag())
        .style("font-family", "KaiTi, serif")
        .style("font-size", "14px");
    }
    
    initTooltip() {
        // 创建工具提示
        this.tooltip = d3.select(this.container)
            .append("div")
            .attr("class", "tooltip")
            .attr("opacity", 0.0)
            .html(`
                <div class="tooltip">
                    <div class='title'></div>
                    <table class='detail-info'>
                        <tr><td class='td-label'></tr>
                    </table>
                </div>
            `)
            .on('dblclick', (event) => {  // 事件对象作为参数
                event.stopPropagation();  // 直接使用参数中的event
            })
            .on('mouseover', (event) => {  // 添加event参数保持一致性
            if (this.mouseoutTimeout) {
                clearTimeout(this.mouseoutTimeout);
                this.mouseoutTimeout = null;
            }
            })
            .on('mouseout', (event) => {  // 添加event参数
            if (this.mouseoutTimeout) {
                clearTimeout(this.mouseoutTimeout);
                this.mouseoutTimeout = null;
            }
            this.mouseoutTimeout = setTimeout(() => {
                this.highlightToolTip(null);
            }, 300);
        });
    }
    
    initEvents() {
      // 双击空白区域重置
      d3.select(this.container).on('dblclick', () => {
        this.dependsNode = this.dependsLinkAndText = [];
        this.highlightObject(null);
      });
    }
    
    getNodeDragBehavior() {
        return d3.drag()
            .on("start", (event, d) => {
            this.force.stop();
            event.sourceEvent?.stopPropagation();
            })
            .on("drag", (event, d) => {
            d.x += event.dx;
            d.y += event.dy;
            this.tick();
            })
            .on("end", (event, d) => {
            d.fx = null;
            d.fy = null;
            this.force.restart();
            });
    }
    
    tick() {
      // 更新元素位置
      this.link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
        
      this.linetext
        .attr("x", d => (d.source.x + d.target.x) / 2)
        .attr("y", d => (d.source.y + d.target.y) / 2);
        
      this.node
        .attr("transform", d => `translate(${d.x},${d.y})`);
    }
    
    highlightObject(obj) {
      if (obj) {
        const objIndex = obj.index;
        this.dependsNode = [objIndex];
        this.dependsLinkAndText = [objIndex];
        
        this.config.data.links.forEach(link => {
          if (objIndex == link.source.index) {
            this.dependsNode.push(link.target.index);
          } else if (objIndex == link.target.index) {
            this.dependsNode.push(link.source.index);
          }
        });
        
        this.node.classed('inactive', d => !this.dependsNode.includes(d.index));
        this.link.classed('inactive', d => 
          !this.dependsLinkAndText.includes(d.source.index) && 
          !this.dependsLinkAndText.includes(d.target.index)
        );
        this.linetext.classed('inactive', d => 
          !this.dependsLinkAndText.includes(d.source.index) && 
          !this.dependsLinkAndText.includes(d.target.index)
        );
      } else {
        this.node.classed('inactive', false);
        this.link.classed('inactive', false);
        this.linetext.classed('inactive', false);
      }
    }
    
    highlightToolTip(obj, event) {
      if (obj) {
        {/* <div class="tooltip" style="width: 300px;">
            <div style="background-color: #daa46a; padding: 10px; color: #fff;">
                ${obj.name}的详情
            </div>
            <table class='detail-info' style="background-color: #fafaf8; padding: 10px;">
                <tr><td class='td-label'>字号：</td><td>${obj.zihao}</td></tr>
                <tr><td class='td-label'>朝代：</td><td>${obj.dynasty}</td></tr>
                <tr><td class='td-label'>年龄：</td><td>${obj.age}</td></tr>
                <tr><td class='td-label'>称号：</td><td>${obj.epithet}</td></tr>
                <tr><td class='td-label'>事迹：</td><td>${obj.deeds}</td></tr>
                <tr><td class='td-label'>代表作：</td><td>${obj.famous}</td></tr>
                <tr><td class='td-label'>链接：</td><td><a href='${obj.link}'>${obj.name}的主页</a></td></tr>
            </table>
        </div> */}
        
        this.tooltip.html(`
            <div class="tooltip" style="width: 300px;">
                <div style="background-color: #daa46a; padding: 10px; color: #fff;">
                    ${obj.name}的详情
                </div>
                <table class='detail-info' style="background-color: #fafaf8; padding: 10px;">
                    <tr><td class='td-label'>年龄：</td><td>${obj.age}</td></tr>
                    <tr><td class='td-label'>链接：</td><td><a href='/front/poetDetail?id=${obj.id}'>${obj.name}的主页</a></td></tr>
                </table>
            </div>
        `)
        .style("left", `${event.pageX + 20}px`)
        .style("top", `${event.pageY - 20}px`)
        .style("opacity", 1.0)
        .style("position", "absolute")
      } else {
        this.tooltip.style("opacity", 0.0);
      }
    }
    
    handleSearch(searchName) {
      if (searchName !== '') {
        this.dependsNode = this.dependsLinkAndText = [];
        this.highlightObject(null);
        
        const matchedNode = this.config.data.nodes.find(node => 
          node.name.toLowerCase() === searchName.toLowerCase()
        );
        
        this.highlightObject(matchedNode);
      } else {
        this.highlightObject(null);
      }
    }
    
    updateSize(width, height) {
      this.config.width = width;
      this.config.height = height;
      
      this.svg
        .attr("width", width)
        .attr("height", height);
        
      this.force.force("center", d3.forceCenter(width / 2, height / 2));
      this.force.alpha(1).restart();
    }
    
    destroy() {
      d3.select(this.container).selectAll("*").remove();
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .chart {
        border-left: 2px solid #95302e;
        min-width: 300px;
    }
    .network-container{
        overflow: hidden;
    }
    .tooltip {
        background-color: white;
    }
  .search-box {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
  }
  
/*   .button {
    position: absolute;
    top: 10px;
    right: 60px;
    z-index: 10;
  } */
   
  /* .tooltip {
    position: absolute;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 5px;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
  }
  
  .tooltip .title {
    background-color: white;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }
  
  .tooltip .detail-info {
    font-size: 14px;
    color: #555;
  }
  
  .tooltip .td-label {
    font-weight: bold;
    padding-right: 5px;
    vertical-align: top;
  }
  
  .node.inactive {
    opacity: 0.2;
  }
  
  .link.inactive {
    opacity: 0.1;
  }
  
  .linetext.inactive {
    opacity: 0.1;
  } */
  </style>